<template>
  <div class="goods-container">
    <div id="0"></div>

    <div class="goods-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="item in x_goodslist"
          :key="item.name"
          :title="item.name"
          @click="clickLeftTitle(item.name)"
        />
      </van-sidebar>
    </div>
    <div class="goods-right">
      <div>
        <div
          v-for="rightitem in x_goodslist"
          :id="rightitem.name"
          :key="rightitem.name + '_right'"
          class="goods-right-item"
        >
          <!-- 标题 -->
          <h4>{{ rightitem.name }}</h4>
          <!-- 对应的商品 rightitem.foods来决定， foods有多少个商品，下面就有多少个儿子 -->
          <div>
            <div v-for="child in rightitem.foods" :key="child.id">
              <img @click="clickFoodsImg(child)" :src="child.imgUrl" />
              <label>{{ child.name }}</label>

              <button
                v-show="child.num > 0"
                @click="$store.commit('addnum', { id: child.id, num: -1 })"
              >
                -
              </button>
              <label v-show="child.num > 0">{{ child.num }}</label>
              <button
                @click="$store.commit('addnum', { id: child.id, num: 1 })"
              >
                +
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_goodslist } from "@/api/order";
import { IType, IFood } from "@/interfaces/foodsinterface";
import BScroll from "better-scroll";

@Component
export default class Goods extends Vue {
  activeKey: number = 0; //左侧激活的索引
  rightbs: any; //右边滚动面板

  created(): void {
    $_goodslist().then((res) => {
      this.$store.commit("initgoodslist", res.data.goodsList);
    });
  }

  mounted(): void {
    // 1. 初始化一个容易为betterscroll的容器，让它能够实现动画滚动
    // 如果一个容器被初始化为bs容器后，默认是没有任何点击/滚动事件
    this.rightbs = new BScroll(".goods-right", { click: true });
  }

  get x_goodslist(): Array<IType> {
    return this.$store.state.goodslist;
  }

  //点击左侧的标题让右侧面板进行滚动
  clickLeftTitle(name: string): void {
    //HTML5新推出的规范
    //bug1：无法选择特殊字符 数字 特殊符号等#@!()...等都不能作为合法选择器
    //bug2：如果浏览器不支持H5，则无法使用此函数
    // document.querySelector('#0')
    // document.querySelector;
    // console.log(document.getElementById('0'))

    // //HTML1-HTML4
    // document.getElementById;
    // document.getElementsByClassName;
    // document.getElementsByTagName;
    // document.getElementsByName;

    // //让此容器跳转到指定的目标元素上
    this.rightbs.scrollToElement(document.getElementById(name), 600);
  }

  clickFoodsImg(foods: IFood): void {
    //路由动态传参  query  params

    //query: 把参数携带在query属性中，所有参数会在地址栏显式， 页面刷新参数仍然保留
    this.$router.push({ path: "/info", query: foods });
    //params: 把参数缓存在内存中，参数不会在地址栏显式， 刷新会丢失参数
    //   this.$router.push({ name: 'info', params: foods })
  }
}
</script>

<style scoped lang="scss">
.van-sidebar-item--select::before {
  background-color: #fcc541;
}

.goods-right::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.goods-container {
  display: flex;
  overflow: hidden;
  flex: 1;

  .goods-left {
    width: 80px;
    overflow: auto;
  }
  .goods-right {
    flex: 1;
    overflow: auto;

    .goods-right-item {
      img {
        border-radius: 8px;
        width: 80px;
        height: 80px;
      }
    }
  }
}
</style>